<template>
  <div style="display: flex; height: 130px; justify-content: space-around; width: 100%; margin-top: 30px;">
    <!-- :count="form.userCount" -->
    <CounterCard
          :count="form.branchCount"
          label="单位用户总数"
          color="#1699D7"
          @click="myClick(1)"
          class="card"
          style="border: 1px solid #1699D7;"
        />
        <CounterCard
          :count="form.deviceNormalCount"
          label="设备在线总数"
          color="#1699D7"
          @click="myClick(2)"
          class="card"
          style="border: 1px solid #1699D7;"
        />
    <CounterCard
      :count="form.deviceMalfunctionCount"
      label="故障设备总数"
      color="#ff5722"
      bgColor="#33210B"
      @click="myClick(3)"
      class="card"
      style="border: 1px solid #ff5722;"
    />
    <CounterCard
      :count="form.warningCount"
      label="报警数据列表"
      color="#ff0000"
      bgColor="#35070A"
      @click="myClick(4)"
      class="card"
      style="border: 1px solid #ff0000;"
    />
    <CounterCard
      :count="form.branchCount"
      label="服务网点"
      color="#1699D7"
      @click="myClick(5)"
      class="card"
      style="border: 1px solid #1699D7;"
    />
  </div>
</template>

<script>
import CounterCard from './CounterCard.vue';
// import { selectXY } from "@/api/lock/address";


export default {
  components: {
    CounterCard,
  },
  data() {
    return {
      form: {
        userCount: 1,
        deviceNormalCount: 1,
        deviceMalfunctionCount: 0,
        warningCount: 100,
        branchCount: 1,
      },
    };
  },
  created() {

  },
  methods: {
    init(data) {
      // selectXY().then(response => {
      //   if (response.code == 200 && response.data) {
      //     data.branchCount = response.data.length
      //     this.form = {...data}
      //   }
      // });
    },
    add() {
      this.form.warningCount += 1
    },
    myClick(type) {
      switch (type) {
        case 1:
          this.$router.push({ path: "/dept" });
          break;
        case 2:
          this.$router.push({
            path: "/inbound",
            query: { status: 3 },
          });
          break;
        case 3:
          this.$router.push({
            path: "/wangdian",
            query: { status: 1 },
          });
          break;
        case 4:
        this.$router.push({
          path: "/tenant",

        });
        break;
        case 5:
          this.$router.push({ path: "/wangdian" });
        break;
      }
    },
  },
};
</script>

<style scoped lang="scss">
  /* Add any additional styling as needed */
  .card:hover {
    transform: scale(1.1);
  }
</style>
